<template>
    <van-space direction="vertical" fill>
        <Cell v-for="item in dataList">
            <van-card :title="item.title" :desc="item.year" :thumb="item.poster"
                @click="onSelect(item)">
                <template #tag>
                    <van-tag v-if="item.type==='movie'" color="#87d068">电影</van-tag>
                    <van-tag v-if="item.type==='tv'" color="#108ee9">电视剧</van-tag>
                </template>
                <template #price>
                    <van-rate v-model="item.rate" :size="14" color="#ffd21e" icon="like" void-icon="like-o" readonly
                        allow-half />
                </template>
            </van-card>
        </Cell>
    </van-space>

</template>
<script name="media-list-mobile" setup>
import { computed } from '@vue/reactivity';
import { Space as VanSpace, CellGroup, Cell, Card as VanCard, Tag as VanTag, Rate as VanRate } from 'vant';

const props = defineProps({
    data: {
        type: Array,
        default: () => []
    }
})

const dataList = computed(() => {
    return props.data.map(item => {
        item.rate = item.score / 2;
        return item;
    })
})



const typeName = (type) => {
    let str = '';
    if (type === 'movie') str = '电影';
    else if (type === 'tv') str = '电视剧';
    return str;
}

const onSelect = (item) => {
    emits('select', item)
}

const emits = defineEmits(['select'])
</script>